<style rel="stylesheet/scss" lang="scss">
</style>

<template>
  <div :style="{ paddingLeft: paddingWidth + 'px'}">
    <div
      class="info_flow_content"
      @click="bodyEvent"
    >
      <div class="menuNav">
        <p><i class="nav_index"></i><span
            v-for="(c, i) in menu_nav"
            :key="i"
          ><i class="el-icon-arrow-right"></i><em>{{c}}</em></span></p>
      </div>
      <div class="info_ad_search">
        <div class="info_a_s_content">
          <div class="customerProCitySearch">
            <el-input
              v-model="contractNo"
              class="page_d_select"
              placeholder="请输入合同编号"
              @keyup.enter.native="pageInfo"
            ></el-input>
            <!--
					  -->
            <el-button
              class="page_d_s_button"
              @click="pageInfo"
            >搜索</el-button>
            <el-select
              v-model="customer_items.model_value"
              :placeholder="customer_items.placeHolder"
              class="con_select unBorderRadius"
              filterable
            >
              <el-option
                v-for="item in customer_items.options"
                :key="item.customerCode"
                :label="item.name"
                :value="item.customerCode"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="contract_items.model_value"
              :placeholder="contract_items.placeHolder"
              class="con_select unBorderRadius"
            >
              <el-option
                v-for="item in contract_items.options"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button
              class="page_d_s_button"
              @click="pageInfo"
            >查询</el-button>
            <div class="dateBut">
              <el-button
                type="primary"
                @click="newContract"
              ><i class="el-icon-plus"></i>新建合同</el-button>
              <el-upload
                class="upload-demo"
                :action="apiUrl.uploadCusContract"
                :with-credentials="true"
                :on-success="handleSuccess"
                :beforeUpload="beforeAvatarUpload"
                :onError="uploadError"
                :show-file-list="false"
                :file-list="fileList"
              >
                <el-button type="primary"><i class="el-icon-plus"></i>导入合同</el-button>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="info_ad_table">
        <div class="page_d_title">
          <i style="visibility:hidden;"></i><span></span>
          <div class="tableVisibleMenu">
            <p
              class="visibleMenuBut"
              @click="changeCheckStatus($event)"
            ></p>
            <div
              class="visibleMenuSelect"
              v-if="visibleMenuSelectStatus"
              @click="preventDefault($event)"
            >
              <el-checkbox-group
                v-model="checkedCities"
                :min="1"
                @change="checkedChange"
              >
                <el-checkbox
                  v-for="city in cities"
                  :label="city"
                  :key="city"
                >{{city}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="tableDetail">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              v-for="(c, i) in table_column"
              :key="i"
              :fixed="c.fixed"
              :sortable="c.sortable"
              :prop="c.prop"
              :label="c.label"
              :formatter="c.format"
              min-width="100"
              v-if="c.visible"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="查看合同"
              width="auto"
              min-width="100"
              class-name="exitBut"
            >
              <template slot-scope="scope">
                <div @click="exitEvent(scope.row.id)"><i class="el-icon-view"></i></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="con_pager">
        <div class="block">
          <!--<span class="demonstration">直接前往</span>-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count"
          >
          </el-pagination>
        </div>
      </div>
      <div
        class="importTitle"
        v-if="importTitleStatus"
        @click.stop=""
      >
        <div class="importTitle_top">
          <span>提示</span>
          <button @click.stop="exitImportTitle">×</button>
        </div>
        <div
          class="importTitleTxt"
          v-html="importTitleTxt"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      importTitleStatus: false,
      importTitleTxt: "",
      visibleMenuSelectStatus: false,
      checkedCities: [
        "序号",
        "合同编号",
        "客户主体",
        "开始时间",
        "结束时间",
        "推广模式",
        "合同状态",
        "审核状态"
      ],
      cities: [
        "序号",
        "合同编号",
        "客户主体",
        "开始时间",
        "结束时间",
        "推广模式",
        "合同状态",
        "审核状态"
      ],
      table_column: [
        {
          fixed: true,
          prop: "id",
          label: "序号",
          sortable: true,
          visible: true
        },
        {
          fixed: false,
          prop: "contractNo",
          label: "合同编号",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "customerName",
          label: "客户主体",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "beginTime",
          label: "开始时间",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "endTime",
          label: "结束时间",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "marketingMode",
          label: "推广模式",
          sortable: false,
          visible: true,
          format: function(row, col) {
            switch (row.marketingMode) {
              case "":
                return "-";
                break;
              case "CA":
                return "CPA";
                break;
              case "CD":
                return "CPD";
                break;
              case "CM":
                return "CPM";
                break;
              case "CC":
                return "CPC";
                break;
              case "CS":
                return "CPS";
                break;
              case "CT":
                return "CPT";
                break;
              case "CP":
                return "CPPA";
                break;
            }
          }
        },
        {
          fixed: false,
          prop: "status",
          label: "合同状态",
          sortable: true,
          visible: true,
          format: function(row, col) {
            switch (row.status) {
              case 0:
                return "-";
                break;
              case 1:
                return "正常";
                break;
              case 2:
                return "即将过期";
                break;
              case 3:
                return "已过期";
                break;
            }
          }
        },
        {
          fixed: false,
          prop: "checkStatus",
          label: "审核状态",
          sortable: true,
          visible: true,
          format: (row, col) => {
            return this.$store.getters.findDingStatus(row.checkStatus)
              ? this.$store.getters.findDingStatus(row.checkStatus).val
              : "未开始";
          }
        }
      ],
      page: {
        sizes: [10, 20, 30, 50, 100, 500],
        offset: 1,
        limit: 10,
        count: 0,
        currentPage: 1
      },
      menu_nav: ["CPA数据管理", "客户合同管理"],
      customer_items: {
        model_value: "",
        placeHolder: "客户",
        options: []
      },
      contract_items: {
        model_value: "",
        placeHolder: "状态",
        options: [
          {
            id: "1",
            val: "正常"
          },
          {
            id: "2",
            val: "即将过期"
          },
          {
            id: "3",
            val: "已过期"
          }
        ]
      },
      tableData: [],
      contractNo: ""
    };
  },
  computed: {
    paddingWidth() {
      return this.$store.state.paddingWidth;
    }
  },
  created() {
    this.customerInfo();
    this.pageInfo();
  },
  methods: {
    customerInfo() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = this.selectPush(
              data.items,
              "customerCode",
              "name"
            );
          }
        })
        .catch(error => {
        });
    },
    pageInfo() {
      /*合同列表*/
      this.$http({
        method: "get",
        url: this.apiUrl.customercContSearch,
        params: {
          offset: this.page.offset,
          limit: this.page.limit,
          contractNo: this.contractNo,
          customerCode: this.customer_items.model_value,
          contractStatus: this.contract_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.page.count = data.totalNums;
            this.tableData = data.items;
          }
        })
        .catch(error => {
        });
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.pageInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.pageInfo();
    },
    checkedChange() {
      for (let item of this.table_column) {
        var index = this.checkedCities.indexOf(item.label);
        index >= 0 ? (item.visible = true) : (item.visible = false);
      }
    },
    changeCheckStatus(e) {
      e.stopPropagation();
      this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
    },
    newContract() {
      this.$router.push({
        path: "customerContractNew",
        query: { customerContractId: "" }
      });
    },
    bodyEvent() {
      this.visibleMenuSelectStatus = false;
    },
    preventDefault(e) {
      e.stopPropagation();
    },
    exitEvent(id) {
      this.$router.push({
        path: "customerContractNew",
        query: { customerContractId: id }
      });
    },
    handleSuccess(response, file, fileList) {
      this.importTitleTxt = response;
      this.importTitleStatus = true;
    },
    // 上传错误
    uploadError(err, file, fileList) {
      this.$message({
        type: "error",
        message: "上传失败，请重试"
      });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      var fileName = file.name.split(".");
      var fileNameLen = fileName.length - 1;
      const extension = fileName[fileNameLen] === "csv";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!extension) {
        this.$message({
          type: "info",
          message: "上传渠道包只能是 csv 格式"
        });
      }
      if (!isLt2M) {
        this.$message({
          type: "info",
          message: "上传包大小不能超过 2MB"
        });
      }
      return extension && isLt2M;
    },
    exitImportTitle() {
      this.importTitleStatus = false;
      this.pageInfo();
    }
  }
};
</script>
